<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" v-on:click="doParent">
			<!-- ----------------事件修饰符------------------ -->
			
			<a v-on:click="doThis" style="background: #FFFFFF;padding: 10px; display: block;">doThis</a>
			<!-- 事件处理流程管理,父控件 子控件 拦截和分发 -->
			<!-- 阻止单击事件继续传播 -->
			<a v-on:click.stop="doThis" style="background: #FF0000;padding: 10px; display: block;" >doThis</a>
			
			<!-- 添加事件监听器时使用事件捕获模式 -->
			<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
			<div v-on:click.capture="doThis" style="background: #0000FF;padding: 10px;">.capture </br>
				<a v-on:click="doThat">doThat</a>
			</div>
			
			<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
			<!-- 即事件不是从内部元素触发的 -->
			<div v-on:click.self="doThat" style="background: #00FF00;padding: 10px;">.self </br>
				<a v-on:click="doThis">doThis</a>
			</div>
			
			<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
			因此，用 v-on:click.prevent.self 会阻止所有的点击，
			而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
			
			
			<!-- 提交事件不再重载页面 -->
			<form v-on:submit.prevent="onSubmit">onSubmit</form>
			
			<!-- 修饰符可以串联 -->
			<a v-on:click.stop.prevent="doThat">doThat</a>
			
			<!-- 只有修饰符 -->
			<form v-on:submit.prevent ></form>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					counter : 0,
					name : 'vue'
				},
				
				methods:{
					doThis:function(){
						console.log('doThis');
					},
					onSubmit:function(){
						console.log('onSubmit');
					},
					doThat:function(){
						console.log('doThat');
					},
					doParent:function(){
						console.log('doParent');
					}
				}
			})
			
		</script>
	</body>
</html>
